<template>
  <div class="test-api-container">
    <h2>API 测试页面</h2>
    <div class="test-section">
      <h3>密码修改 API 测试</h3>
      <div class="form-group">
        <label>当前密码:</label>
        <input v-model="testData.oldPassword" type="password" placeholder="请输入当前密码" />
      </div>
      <div class="form-group">
        <label>新密码:</label>
        <input v-model="testData.newPassword" type="password" placeholder="请输入新密码" />
      </div>
      <button @click="testChangePassword" :disabled="loading">
        {{ loading ? '测试中...' : '测试密码修改API' }}
      </button>
    </div>

    <div class="result-section" v-if="testResult">
      <h3>测试结果:</h3>
      <pre>{{ JSON.stringify(testResult, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { changePasswordApi } from '#/api/core/auth';

const loading = ref(false);
const testResult = ref<any>(null);

const testData = ref({
  oldPassword: '',
  newPassword: ''
});

const testChangePassword = async () => {
  try {
    loading.value = true;
    testResult.value = null;

    console.log('🔍 开始测试密码修改API...');
    console.log('🔍 请求参数:', testData.value);

    const result = await changePasswordApi({
      password: testData.value.oldPassword,
      realName: testData.value.newPassword,
    });

    console.log('🔍 密码修改API响应:', result);
    console.log('🔍 响应类型:', typeof result);
    console.log('🔍 响应是否为null:', result === null);

    testResult.value = {
      success: true,
      data: result,
      isNull: result === null,
      timestamp: new Date().toISOString()
    };

  } catch (error: any) {
    console.error('🔍 密码修改API测试失败:', error);
    console.error('🔍 错误详情:', {
      message: error?.message,
      response: error?.response,
      status: error?.response?.status,
      data: error?.response?.data
    });

    testResult.value = {
      success: false,
      error: {
        message: error?.message,
        response: error?.response,
        status: error?.response?.status,
        data: error?.response?.data
      },
      timestamp: new Date().toISOString()
    };
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.test-api-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.result-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.result-section pre {
  background-color: white;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>
